<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件通信</title>
    <link rel="stylesheet" type="text/css" href="./style.css">
</head>
<body>
    <div id="app">
        <h2>全局注册</h2>
        <custom-select btn-value="查询"></custom-select>
        <custom-select btn-value="搜索"></custom-select>
    </div>
    <script src="../../2.1.8/vue.js"></script>
    <script>
        /*
            组件通信
                组件实例的作用域是孤立的、不能在子组件直接使用分组父组件数据。
                可以在组件上使用自定义属性绑定数据，在组件中需要显示的用 props 声明自定义属性名。
                1. 向子组件传数据
                    (1) 在父组件中自定义属性
                    (2) 子组件通过 props 接收自定义属性
                    (3) 将接收的属性 通过 v-bind 绑在指定的元素 上
        */
        Vue.component('custom-select',{
            props : ['btnValue'],
            template : 
            `<section class="warp">
                <div class="searchIpt clearFix">
                    <div class="clearFix">
                        <input type="text" class="keyWord" value="" />
                        <input type="button" :value="btnValue">
                        <span></span>
                    </div>
                    <ul class="list">
                        <li>html+css</li>
                        <li>html5+css3</li>
                        <li>javascript</li>
                        <li>angular</li>
                        <li>react</li>
                        <li>vue</li>
                        <li>jquery</li>
                        <li>nodejs</li>
                    </ul>
                </div>
            </section>`
        });
        let vm = new Vue({
            el : '#app'
        });
    </script>
</body>
</html>